/*
 * @Author: wangyz
 * @Last Modified by: wangyz
 * Description:
    1.列表查询组件
    2.slot:title头部标题,header-text跟随头部标题后描述,body内容体
    3.折叠按钮，对内容体折叠打开展示

 */
<template>
  <div class="search-list">
    <div class="search-list-wrapper">
      <div v-if="title !=''" class="search-list-header" :class="{'search-list-header-bottom':showCollapse}">
        <div class="header-left">
          <div class="search-list-icon" />
          <div class="search-list-title">{{ title }}</div>
        </div>
        <div class="header-text">
          <slot name="header-text" />
        </div>
        <div class="header-right">
          <slot name="header-btn" />
          <i v-if="showCollapse" :class="{icon:true,'el-icon-d-arrow-left':true,'icon-up':!isCollapse,'icon-down':isCollapse}" @click="doCollapse" />
        </div>
      </div>
      <div class="search-list-body">
        <div v-show="!isCollapse">
          <slot name="body" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SearchList',
  props: {
    title: {
			type: String,
			default: '查询结果'
		},
		// 是否展示折叠按钮
		showCollapse: {
			type: Boolean,
			default: () => {
				return false
			}
		}
  },
	data() {
		return {
			isCollapse: false
		}
	},
	methods: {
		doCollapse() {
			this.isCollapse = !this.isCollapse
			this.$emit('isCollapse', this.isCollapse)
			console.log(`%c true 折叠; false 打开::::${this.isCollapse}`, 'color:#0f0;')
		}
	}
}
</script>
<style lang="scss" scoped>
.search-list {
	min-height: 1px;
	font-size: 12px;
	overflow: hidden;
	outline: none;
  .search-list-wrapper {
		border: 1px solid #e5e5e5;
		overflow: hidden;
		position: relative;
		//border-radius: 3px;
		.search-list-header {
			height: 50px;
			background: #fff;
			border-bottom: none;
			color: #201f35;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 16px 10px 14px ;
			.header-left {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.header-text{
				display: flex;
				flex-direction: row;
				margin-right: auto;
                margin-left: 30px;
			}
			.header-right {
				display: flex;
				flex-direction: row;
				.icon {
					font-size:18px;
					margin-left: 10px;
					cursor: pointer;
					&-up {
						transform: rotate(-90deg);
					}
					&-down {
						transform: rotate(90deg);
					}
				}
			}
			&-bottom {
				border-bottom: 3px solid #d80c18;
			}
		}
		.search-list-icon {
			width: 6px;
			height: 15px;
			border-radius: 12px;
			background: #eb4b4b;
			margin-left: 6px;
			margin-right: 10px;
		}
		.search-list-title {
			height: 19px;
			line-height: 19px;
			font-size: 14px;
            font-weight: 550;
		}
		.search-list-body {
			//padding: 0 0 8px 0;
		}
	}
}
</style>
